<template>
   <div class="news-area">
       <div class="news-header">
           <p>行业新闻</p>
           <p>INDUSTRY NEWS</p>
           <!-- <div class="see-more"> 
               <p class="see-more-text">查看更多</p>
               <img src="@/assets/image/index/arrow-right-s.png" alt="">
           </div> -->
       </div>
       <div class="news-list">
           <div class="news-list-item">
               <img src="@/assets/image/index/news-img1.png" alt="">
               <div class="news-list-item-text">
                   <p class="title">金色摇篮携智慧系统亮相2019中国国际涂料展</p>
                   <p class="time">2019-11-20 11:53:09</p>
                   <p class="summary">2017年7月17日，吉力公司举行了一个简单而庄重的新招牌揭牌仪式科技…</p>
               </div>
               
           </div>
           <div class="news-list-item">
               <img src="@/assets/image/index/news-img2.png" alt="">
               <div class="news-list-item-text">
                   <p class="title">金色摇篮携智慧系统亮相2019中国国际涂料展</p>
                   <p class="time">2019-11-20 11:53:09</p>
                   <p class="summary">2017年7月17日，吉力公司举行了一个简单而庄重的新招牌揭牌仪式科技…</p>
               </div>
           </div>
            <div class="news-list-item">
               <img src="@/assets/image/index/news-img1.png" alt="">
               <div class="news-list-item-text">
                   <p class="title">金色摇篮携智慧系统亮相2019中国国际涂料展aaaaaaaaaaaaaaaaaddddddddd</p>
                   <p class="time">2019-11-20 11:53:09</p>
                   <p class="summary">2017年7月17日，吉力公司举行了一个简单而庄重的新招牌揭牌仪式科技…</p>
               </div>
           </div>
            <div class="news-list-item">
               <img src="@/assets/image/index/news-img2.png" alt="">
                <div class="news-list-item-text">
                   <p class="title">金色摇篮携智慧系统亮相2019中国国际涂料展</p>
                   <p class="time">2019-11-20 11:53:09</p>
                   <p class="summary">2017年7月17日，吉力公司举行了一个简单而庄重的新招牌揭牌仪式科技…</p>
               </div>
           </div>
            <div class="news-list-item">
               <img src="@/assets/image/index/news-img1.png" alt="">
               <div class="news-list-item-text">
                   <p class="title">金色摇篮携智慧系统亮相2019中国国际涂料展</p>
                   <p class="time">2019-11-20 11:53:09</p>
                   <p class="summary">2017年7月17日，吉力公司举行了一个简单而庄重的新招牌揭牌仪式科技…</p>
               </div>
           </div>
            <div class="news-list-item">
               <img src="@/assets/image/index/news-img2.png" alt="">
               <div class="news-list-item-text">
                   <p class="title">金色摇篮携智慧系统亮相2019中国国际涂料展</p>
                   <p class="time">2019-11-20 11:53:09</p>
                   <p class="summary">2017年7月17日，吉力公司举行了一个简单而庄重的新招牌揭牌仪式科技…</p>
               </div>
           </div>
       </div>
   </div>
</template>

<script>
export default {
   name: 'news',
   data() {
       return {}
   },
  components: {}
}
</script>

<style scoped lang="less">
.news-area{
    height: 15.8rem;
    background-color: #fff;
    .news-header{
        height: 2.2rem;
        text-align: center;
        position: relative;
        :nth-child(1){
            margin-top: 1rem;
            font-size: 0.4rem;
            color: #333333;
        }
        :nth-child(2){
            font-size: 0.2rem;
            color: #777777;
        }
        .see-more{
            position: absolute;
            height: 0.18rem;
            width: 0.9rem;
            right: 0.17rem;
            bottom: 0.14rem;
            img{
                width: 0.05rem;
                height: 0.09rem;
                // float: right;
            }
            .see-more-text{
                clear: both;
                font-size: 0.165rem;
                color: #777777;
                // float: left;
            }
        }
    }
    .news-list{
        width: 7.14rem;
        height: 13.20rem;
        margin: 0 auto;
        display: flex;
        justify-content:space-between;
        align-content:space-between;
        flex-wrap: wrap;
        .news-list-item{
           
            height: 4.25rem;
            width: 3.45rem;
            border: 1px solid #f6f6f6;
            img{
                height: 2.2rem;
                width: 3.45rem;

            }
            .news-list-item-text{
                width: 3.12rem;
                margin-left: 0.23rem;
                position: relative;
            .title{
                // display: block;
                // margin: 0;
                font-size: 0.24rem;
                transform: scale(5/6);
                color: #4e4e4e;
                font-weight: 700;
                // height: 0.5rem;
            //    width: 3.13rem;
                overflow:hidden;
                text-overflow:ellipsis;
                display:-webkit-box; 
                -webkit-box-orient:vertical;
                -webkit-line-clamp:2;
                // position: absolute;
                // left: 0;
               
            }
            .time{
                font-size: 0.24rem;
                color: #b1b1b1;
                transform: scale(0.5);
                position: relative;
                right: 0.48rem;
                
            }
            .summary{
                font-size: 0.24rem;
                color: #777777;
                line-height: 0.25rem;
                height: 0.5rem;
                 transform: scale(5/6);
                 overflow:hidden;
                text-overflow:ellipsis;
                display:-webkit-box; 
                -webkit-box-orient:vertical;
                -webkit-line-clamp:2;
            }
            }
            
        }
    }

    
}

</style>
